import React, { useState } from 'react'
import { Input, Button } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import {useNavigate} from 'react-router-dom'

function Index() {
    let navigate = useNavigate()
    const [start, setStart] = useState('')
    const [end, setEnd] = useState('')
    const [date,setDate] = useState('2025-06-03')
    return (
        <div>
            <h1>首页</h1>
            <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', height: '100px' }}>
                <Input
                    style={{ width: '70px' }}
                    placeholder='起始地'
                    value={start}
                    onChange={val => {
                        setStart(val)
                    }}
                />
                <LoopOutline fontSize={30} />
                <Input
                    style={{ width: '70px' }}
                    placeholder='目的地'
                    value={end}
                    onChange={val => {
                        setEnd(val)
                    }}
                />
                
            </div>
            <h1>{date}</h1>
            <Button block color='primary' size='large' onClick={()=>navigate(`/list?start=${start}&end=${end}&date=${date}`)}>
                搜索
            </Button>
        </div>
    )
}

export default Index
